<template>
    <div>
        <!-- 变更历史 -->
        <h-section title="变更历史" collapse>
            <edit-product-history-record :list="list" :detail="detail" style="margin-top: -3px" />
        </h-section>
        <!-- 状态是需求变更才显示 -->
        <relative-change :detail="detail" v-if="detail.requireChange !== 1" />
    </div>
</template>

<script lang="ts">
import EditProductHistoryRecord from '@/views/version/versionDetail/components/RelateProcess/CheckProcess/components/EditProductHistoryRecord.vue';
import RelativeChange from '@/views/version/versionDetail/components/RelateChange/relativeChange.vue';
import { defineComponent, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        EditProductHistoryRecord,
        RelativeChange
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const state = reactive<any>({
            list: []
        });
        const init = () => {
            const proList = props.detail.pmpProductVersionHistoryDTOs || [];
            let timeList = props.detail.pmpExpectTimeHistoryDTOs || [];
            if (timeList.length) {
                timeList = timeList.map((item) => ({
                    ...item,
                    changeData: item.expectTime
                }));
            }
            state.list = [...proList, ...timeList];
        };
        init();
        watch(
            () => props.detail,
            () => {
                init();
            },
            {
                deep: true
            }
        );
        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped>
</style>